@font-face { font-family: "GeistSans"; src: url("https://raw.githubusercontent.com/jxarco/lexgui.js/master/data/GeistSans.ttf"); }
@font-face { font-family: "CascadiaCode"; src: url("https://raw.githubusercontent.com/jxarco/lexgui.js/master/data/CascadiaCode.ttf"); font-weight: 400; }

:root {
	--border-style: 1px solid #444;
	--panel-width: 300px;
	--page-padding: 24px;
	--max-width: 1100px;
	--icon-size: 20px;
	--stylish-color: light-dark(#fd18a5, #e2c886);
}

#content {
	font-family: "GeistSans", sans-serif;
	tab-size: 4;
	max-width: var(--max-width);
	width: 95%;
	height: auto;
	margin: 0 auto;
	padding: var(--page-padding);
	word-break: break-word;
	text-align: justify;
	border-radius: 12px;
}

#content .lexarea.docs {
	margin-block: 1.5em;
	width: 80% !important;
	justify-self: center;
}

#content::-webkit-scrollbar {
    display: none;
}

.code-container {
	position: relative;
	margin: 16px calc(-1 * var(--page-padding));
}

.code-container button {
	border: none;
	outline: none;
	background: none;
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 18px;
	padding: 6px;
	color: #bbb;
	transition: color 0.25s;
	z-index: 1;
}

.code-container button:hover {
	color: #ccc;
	cursor: pointer;
}

.code-container button.copied svg {
	color: #42d065;
}

#content a {
	color: var(--global-color-accent-light);
	cursor: pointer;
	text-decoration: none;
}

#content .lexpanel a, #content .lexarea a {
	color: unset;
}

#content h1 {
	font-size: 32px;
	line-height: 48px;
	margin-left: -2px;
	margin-top: 0.67em;
	margin-bottom: 0.67em;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}

#content h2 {
	font-size: 28px;
	line-height: 36px;
	font-weight: normal;
	margin-left: -1px;
	margin-top: 0.83em;
	margin-bottom: 0.83em;
}

#content h3 {
	font-size: 20px;
	line-height: 28px;
	font-weight: normal;
	margin-top: 0.95em;
	margin-bottom: 0.95em;
}

code {
	font-family: "CascadiaCode", monospace;
	font-size: 14px;
	line-height: calc(var(--line-height) - 1px);
	/* margin: 16px calc(-1 * var(--page-padding)); */
	background-color: #282828;
	text-align: unset !important;
	text-justify: unset !important;
}

code.inline {
	display: inline-block;
	vertical-align: middle;
	border-radius: 4px;
	padding: 3px 6px;
	margin: 0;
}

code.inline:not(.ref) {
	color: var(--stylish-color);
	font-weight: 500;
}

code:not(.inline) {
	display: block;
	padding: calc(var(--page-padding) - 6px) var(--page-padding);
	/* white-space: pre-wrap; */
	overflow: auto;
	box-sizing: border-box;
	position: relative;
	border-radius: 6px;
}

code.inline.table {
	padding: 0px 2px;
	line-height: unset;
	font-size: 13px;
}

code.inline.desc {
	background-color: var(--global-color-tertiary);
	color: var(--global-text-tertiary);
}

#content strong {
	font-weight:700;
}

#content a.permalink {
	float: right;
	margin-left: 5px;
	display: none;
}

#content > img {
	width: 100%;
	/* margin: 16px calc(-1 * var(--page-padding)) ; */
	border-radius: 4px;	
}

@media all and ( min-width: 1700px ) {
	
	:root {
		--panel-width: 360px;
		--line-height: 28px;
		--page-padding: 28px;
		--icon-size: 24px;
	}

	#content {
		width: 100%;
	}

	#content h1 {
		font-size: 42px;
		line-height: 50px;
	}

	#content h2 {
		font-size: 32px;
		line-height: 40px;
	}

	#content h3 {
		font-size: 24px;
		line-height: 32px;
	}

}

/* mobile */

@media all and ( max-width: 640px ) {

	:root {
		--page-padding: 16px;
		--icon-size: 20px;
	}

	#content {
		padding: var(--page-padding);
	}

	#content h1 {
		font-size: 28px;
		line-height: 36px;
		padding-right: 20px;
		margin-top: 0;
	}

	#content h2 {
		font-size: 24px;
		line-height: 32px;
		margin-top: 24px;
	}

	#content h3 {
		font-size: 20px;
		line-height: 28px;
	}

}

pre .str, code .str { color: #c79369; } /* string */
pre .kwd, code .kwd { color: #2194ce; } /* keyword */
pre .com, code .com { color: #999999; } /* comment */
pre .cls, code .cls { color: #4fccbd; } /* class */
pre .stc, code .stc { color: #0b6b60; } /* static member */
pre .stf, code .stf { color: #6d8cf5; } /* static function */
pre .lit, code .lit { color: #ce57b4; } /* literal */

pre .pre, code .pre { color: #8f8c8c; } /* preprocessor */
pre .pln, code .pln { color: #444444; } /* plaintext */
pre .dec, code .dec { color: #a5dba0; } /* decimal */
pre .mtd, code .mtd { color: #e6e2b8; } /* method */
pre .var, code .var { color: #d8d5d5; } /* variable */
pre .enu, code .enu { color: #c0dec2; } /* enum */

pre .tag, code .tag { color: #2194ce; } /* HTML tag */
pre .atn, code .atn { color: #81cdf8; } /* HTML attribute name */
pre .com, code .com { color: #4e994d; } /* comment */
pre .pln, code .pln { color: #aaaaaa; } /* plaintext */

.desc {
	color: var(--global-text-tertiary);
}

a .desc {
	color: var(--global-color-accent);
}

.param {
	color: var(--stylish-color);
}

.prop, .method {
	color: var(--stylish-color);
	font-size: 16px;
}

code:has(.constructor) {
	background: none;
}

.constructor {
	color: var(--stylish-color);
	font-size: 21px;
}

#content span.solid {
	border-radius: 8px;
	padding: 2px;
	padding-inline: 8px;
}

#content span.outline {
	border-radius: 8px;
	padding: 2px;
	padding-inline: 8px;
}

:root[data-theme="light"] #content {
	color: #202124;
}

:root[data-theme="light"] code {
	background-color: #ededed;
}

:root[data-theme="light"] code button {
	color: #434e53;
}

:root[data-theme="light"] code button:hover {
	color: #879094;
}

:root[data-theme="light"] pre .str, :root[data-theme="light"] code .str { color: #188038; }
:root[data-theme="light"] pre .kwd, :root[data-theme="light"] code .kwd { color: #1967d2; }
:root[data-theme="light"] pre .com, :root[data-theme="light"] code .com { color: #b80672; }
:root[data-theme="light"] pre .cls, :root[data-theme="light"] code .cls { color: #0b9484; }
:root[data-theme="light"] pre .dec, :root[data-theme="light"] code .dec { color: #c5221f; }
:root[data-theme="light"] pre .mtd, :root[data-theme="light"] code .mtd { color: #636362; }
:root[data-theme="light"] pre .lit, :root[data-theme="light"] code .lit { color: #1967d2; }
:root[data-theme="light"] pre .var, :root[data-theme="light"] code .var { color: #222222; }
:root[data-theme="light"] pre .enu, :root[data-theme="light"] code .enu { color: #505fe2; }
:root[data-theme="light"] pre .tag, :root[data-theme="light"] code .tag { color: #2183b4; }
:root[data-theme="light"] pre .atn, :root[data-theme="light"] code .atn { color: #a753c0; }

:root[data-theme="light"] .desc {
	color: #70777a;
}

:root[data-theme="light"] a .desc {
	color: var(--global-color-accent);
}

:root[data-theme="light"] .param {
	color: #37474f;
}

:root[data-theme="light"] .prop, :root[data-theme="light"] .method {
	color: #37474f;
}

:root[data-theme="light"] #goUpButton {
	color: #37474f;
}

:root[data-theme="light"] #goUpButton:hover {
	color: #879094;
}

.lextable {
	overflow-x: scroll
}

.lextable table {
	table-layout: auto;
}

.lextable table th {
	white-space: nowrap;
}

/* Hack to shrink Type and Method columns in reference docs */
.lextable:has(input) table tbody tr:last-child td:not(:last-child) {
	width: 1px;
    white-space: nowrap;
}